Overview
Tags classify content using keywords or labels. They're added to a web page, an asset or other content to help users search for and find related content quickly and easily.
There are 4 types of tags in our Design System:
- Default tags
- Action tags
- Supplementary information tags
- Applied filter tags (removable tags).
All tags are available in 2 sizes. Default and Large. Default tags are used for search results or in cards. Large tags are useful to tag sections of content such as articles and blogs posts.
Default tags
This is the default style for tags, they're used to display a list of keywords or labels, but aren't clickable.
Action tags
Action tags are clickable links and are used when a tag needs to be interactive. In most cases this is when tags link to additional content related to that tagged topic.
Information tags
Information tags convey additional data about a subject and are styled differently to tags that are topic based. These tags are most often used for content that is numerical such as read time, distance and file size. This style of tag is also used to indicate result numbers within our filterable search component.
Information tags are similar but not the same as badges. Badges usually contain numbers or icons and are used to indicate a status, notification count, or a very small piece of information attached to an item. Information tags similar to badges often contain numbers but don't sit within the component, are larger and convey more unique content.
Applied filter tags
Applied filter tags are a unique variant of large clickable tags that are used to indicate applied filters or facets.